<!DOCTYPE html>
<html>
<head>
	<title>EaselJS Example: Circles</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
	<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
		 http://code.createjs.com -->

<script id="editable">
	var canvas;
	var stage;
	var tweens;
	var activeCount;
	var circleCount = 25;
	var text;

	function init() {
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);
		stage.enableDOMEvents(true);
		tweens = [];
		stage.enableMouseOver(10);
		createjs.Touch.enable(stage);

		for (var i = 0; i < circleCount; i++) {
			// draw the circle, and put it on stage:
			var circle = new createjs.Shape();
			circle.graphics.setStrokeStyle(15);
			circle.graphics.beginStroke("#113355");
			circle.graphics.drawCircle(0, 0, (i + 1) * 4);
			circle.alpha = 1 - i * 0.02;
			circle.x = Math.random() * 550;
			circle.y = Math.random() * 400;
			circle.compositeOperation = "lighter";

			var tween = createjs.Tween.get(circle).to({x: 275, y: 200}, (0.5 + i * 0.04) * 1500, createjs.Ease.bounceOut).call(tweenComplete);
			tweens.push({tween: tween, ref: circle});
			stage.addChild(circle);
		}
		activeCount = circleCount;
		stage.addEventListener("stagemouseup", handleMouseUp);

		text = new createjs.Text("Click Anywhere to Tween", "36px Arial", "#777");
		text.x = 350;
		text.y = 200;
		stage.addChild(text);

		createjs.Ticker.addEventListener("tick", tick);
	}

	function handleMouseUp(event) {
		if (text) {
			stage.removeChild(text);
			text = null;
		}
		for (var i = 0; i < circleCount; i++) {
			var ref = tweens[i].ref;
			var tween = tweens[i].tween;
			createjs.Tween.get(ref, {override: true}).to({x: stage.mouseX, y: stage.mouseY}, (0.5 + i * 0.04) * 1500, createjs.Ease.bounceOut).call(tweenComplete);
		}
		activeCount = circleCount;
	}

	function tweenComplete() {
		activeCount--;
	}

	function tick(event) {
		if (activeCount) {
			stage.update(event);
		}
	}

</script>
</head>
<body onload="init();">

<header class="TweenJS">
	<h1>CSS Plugin Example</h1>

	<p>This example shows how a plugin can be used to override values in
		TweenJS. The CSSPlugin ensures the CSS position and size parameters all
		receive the "px" suffix required by CSS.</p>
</header>

<canvas id="testCanvas" width="960" height="400" style="background:#000;"></canvas>

</body>
</html>
